<template>
	<view>
		<view class="title">
			<view class="title_left">
				路线编号
			</view>
			<view class="title_right" @tap="changeStatus">
				<text> {{showStatus}}</text>
				<image src="../../static/icon/icon6.png" mode=""></image>
			</view>
		</view>
		<view class="title " v-for="(item,index) in list" 
		@tap="jumpDetail(item.id)"
		:key='index'>
			<view class="title_left">
				{{item.id}}
			</view>
			<view class="title_right">
				{{item.stat}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				chioceItem:[ '进行中', '待开始'],
				showStatus:'所属状态',
				list: [{
					id: 'FASIHJISA',
					stat: '已完成'
				}, {
					id: 'FASIHJISA',
					stat: '已完成'
				}, {
					id: 'FASIHJISA',
					stat: '已完成'
				}, {
					id: 'FASIHJISA',
					stat: '已完成'
				}, {
					id: 'FASIHJISA',
					stat: '已完成'
				}, {
					id: 'FASIHJISA',
					stat: '已完成'
				}, {
					id: 'FASIHJISA',
					stat: '已完成'
				}, {
					id: 'FASIHJISA',
					stat: '已完成'
				}, {
					id: 'FASIHJISA',
					stat: '已完成'
				}, ]
			};
		},
		methods: {
			//选择状态
			changeStatus() {
				uni.showActionSheet({
					itemList: this.chioceItem,
					success:(res)=> {
						this.showStatus=this.chioceItem[res.tapIndex]
					},
					fail(res) {
						console.log(res.errMsg)
					}
				})
			},
			//详情跳转
			jumpDetail(id){
				uni.navigateTo({
					url:"../route_detail/route_detail"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		position: relative;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #7F8084;
		line-height: 40rpx;
		display: flex;
		justify-content: space-between;
		text-align: center;
		border-bottom: 2rpx solid #EFEFEF;
		padding: 38rpx 0;

		view {
			width: 50%;
		}

		image {
			width: 20rpx;
			height: 14rpx;
			margin-left: 8rpx;
		}
	}
</style>
